<template>
	<view class="container">
		<view class="user-section" :style="{'background': themeBg}">
			<view class="user-info-box">
				<view class="user-data">
					<view class="portrait-box" @click="setInfo">
						<image class="portrait" :src="userInfo.avatar || 'https://www.guizhouqy.com/mini/missing-face.png'"></image>
					</view>
					<view class="info-box">
						<text class="username" @click="navTo">{{userInfo.nickname || '点击登录'}}</text>
						<br />
						<view style="display: flex;margin-top: 20rpx;align-items: center;">
							<button class="setPhone" open-type="getPhoneNumber" @getphonenumber="bindPhone"
								v-if="userInfo.phone == ''">绑定手机号</button>
							<view class="setPhone" style="width: 100rpx;" v-else>ID: {{ userInfo.id }}</view>
							<image :src="svip" v-if="userInfo.svip" style="width: 39px;height: 15px;margin-left: 5px;">
							</image>
						</view>
					</view>
				</view>
				<view class="set-tools">
					<view class="user-item" @click="navTo('/pages/verification/index')" hover-class="common-hover"
						:hover-stay-time="50" style="margin-right: 20rpx;position: relative;" v-if="verification">
						<view class="tips">核销员</view>
						<uni-icons custom-prefix="iconfont" type="icon-16gl-enter" size="26" color="#fff"></uni-icons>
					</view>
					<view class="user-item" @click="navTo('/pages/set/set')" hover-class="common-hover"
						:hover-stay-time="50">
						<uni-icons custom-prefix="iconfont" type="icon-shezhi" size="25" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="cover-container">
			<view style="width: 100%;height: 20rpx;"></view>
			<view class="super-vip" :style="svipBg">
				<view class="super-info">
					<image :src="king" style="width: 82rpx;height: 84rpx;"></image>
					<view class="desc" v-if="userInfo.svip">尊敬的超级会员您好</view>
					<view class="desc" v-else>开通可享更多权益</view>
					<view class="super-btn" @click="buyVip" v-if="userInfo.svip">查看详情</view>
					<view class="super-btn" @click="buyVip" v-else>立即开通</view>
				</view>
			</view>
			<view class="tj-sction">
				<view class="tj-item" @click="navTo('/pages/coupon/index')">
					<text class="num">{{ userInfo.couponNum }}</text>
					<text>优惠券</text>
				</view>
				<view class="tj-item">
					<text class="num">{{ userInfo.integral }}</text>
					<text>我的积分</text>
				</view>
				<view class="tj-item">
					<text class="num">{{ userCollection }}</text>
					<text>收藏数</text>
				</view>
				<view class="tj-item" @click="navTo('/pages/user/footprint')">
					<text class="num">{{ userInfo.footprintNum }}</text>
					<text>我的足迹</text>
				</view>
			</view>
			<!-- 订单 -->
			<view style="background: #fff;margin-top: 10px;border-radius: 5px;">
				<view class="status-title">
					<text style="font-weight: 500;">订单中心</text>
					<view @click="navTo('/pages/order/order?status=-1')" hover-class="common-hover"
						:hover-stay-time="50">
						<text style="color: #666;font-size: 13px;">全部</text>
						<uni-icons type="right" size="13" color="#666"></uni-icons>
					</view>
				</view>
				<view class="order-section">
					<uni-badge :text="orderBar.unPaid" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=2')"
							hover-class="common-hover" :hover-stay-time="50">
							<uni-icons custom-prefix="iconfont" type="icon-daifukuan" size="30" :color="fontColor"
								class="icon-class"></uni-icons>
							<text>待付款</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.unExpress" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=3')"
							hover-class="common-hover" :hover-stay-time="50">
							<uni-icons custom-prefix="iconfont" type="icon-daifahuo" size="30" :color="fontColor"
								class="icon-class"></uni-icons>
							<text>待发货</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.unReceive" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=4')"
							hover-class="common-hover" :hover-stay-time="50">
							<uni-icons custom-prefix="iconfont" type="icon-daishouhuo" size="30" :color="fontColor"
								class="icon-class"></uni-icons>
							<text>待收货</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.unAppraise" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=0')"
							hover-class="common-hover" :hover-stay-time="50">
							<uni-icons custom-prefix="iconfont" type="icon-daipingjia" size="30" :color="fontColor"
								class="icon-class"></uni-icons>
							<text>待评价</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.refund" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/refund/refundList')" hover-class="common-hover"
							:hover-stay-time="50">
							<uni-icons custom-prefix="iconfont" type="icon-shouhou" size="30" :color="fontColor"
								class="icon-class"></uni-icons>
							<text>退款/售后</text>
						</view>
					</uni-badge>
				</view>
			</view>
			<!-- 浏览历史 -->
			<view style="background: #fff;margin-top: 10px;border-radius: 5px;">
				<text style="position: relative;top: 10px;left: 10px;">我的服务</text>
				<view class="user-menus">
					<view class="user-item" @click="navTo('/pages/coupon/index')" hover-class="common-hover"
						:hover-stay-time="50" v-if="sysConfig.coupon == 1">
						<image :src="userIcon.coupon" class="user-icon" />
						</image>
						<text style="margin-top: 10rpx;">我的卡券</text>
					</view>
					<view class="user-item" @click="navTo('/pages/address/address')" hover-class="common-hover"
						:hover-stay-time="50">
						<image :src="userIcon.address" class="user-icon" />
						</image>
						<text style="margin-top: 10rpx;">我的地址</text>
					</view>
					<view class="user-item" @click="navTo('/pages/user/level')" hover-class="common-hover"
						:hover-stay-time="50">
						<image :src="userIcon.level" class="user-icon" />
						</image>
						<text style="margin-top: 10rpx;">我的等级</text>
					</view>
					<view class="user-item" @click="navTo('/pages/user/collection')" hover-class="common-hover"
						:hover-stay-time="50">
						<image :src="userIcon.collect" class="user-icon" />
						</image>
						<text style="margin-top: 10rpx;">我的收藏</text>
					</view>
					<view class="user-item" @click="navTo('/pages/mine/balance')" hover-class="common-hover"
						:hover-stay-time="50">
						<image :src="userIcon.money" class="user-icon" />
						</image>
						<text style="margin-top: 10rpx;">我的余额</text>
					</view>
					<view class="user-item" @click="navTo('/pages/agent/index')" hover-class="common-hover"
						:hover-stay-time="50" v-if="userInfo.is_agent == 1">
						<image :src="userIcon.spread" class="user-icon" />
						</image>
						<text style="margin-top: 10rpx;">我的推广</text>
					</view>
					<view class="user-item" @click="navTo('/pages/present/award')" hover-class="common-hover"
						:hover-stay-time="50">
						<image :src="userIcon.present" class="user-icon" />
						</image>
						<text style="margin-top: 10rpx;">消费奖励</text>
					</view>
				</view>
			</view>
		</view>
		<view class="copyright">本系统由 {{ copyright }} 强力驱动</view>

		<uni-popup ref="userData" type="bottom">
			<view class="user-data-box">
				<view class="title">
					<view class="left">设置您的头像、昵称</view>
					<uni-icons type="closeempty" size="24" @click="hideAvatar" color="#909399"></uni-icons>
				</view>
				<view class="desc">
					设置您的头像、昵称，有助于获得更具辨识度的用户中心界面。点击头像进行头像更改，输入昵称进行昵称更改。
				</view>
				<view class="avatar" style="margin-top: 20rpx;">
					<span>头像</span>
					<!-- #ifndef MP-WEIXIN -->
					<image :src="selfInfo.avatar" style="width: 80rpx;height: 80rpx;margin-left: 80rpx;"
						@click="changeAvatar"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image :src="selfInfo.avatar" style="width: 80rpx;height: 80rpx;margin-left: 80rpx;"></image>
					</button>
					<!-- #endif -->
				</view>
				<view class="avatar">
					<span>昵称</span>
					<input class="uni-input user-nick" placeholder="输入昵称2~16个字符" placeholder-style="font-size:26rpx"
						v-model="selfInfo.nickname" />
				</view>
				<button class="save" :style="{'background': themeBg}" @click="saveInfo">保存</button>
			</view>
		</uni-popup>
		<tabbar :count="2"></tabbar>
	</view>
</template>
<script>
	import tabbar from '@/components/custom-tab-bar/index';
	import store from '@/store';
	import {
		goLogin,
		checkLogin
	} from '@/libs/login';
	import {
		BASE_URL
	} from '@/config/app';

	export default {
		components: {
			tabbar
		},
		data() {
			return {
				orderBar: {
					unPaid: 0,
					unExpress: 0,
					unReceive: 0,
					unAppraise: 0,
					refund: 0,
				},
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				userInfo: {
					id: 0,
					avatar: "",
					nickname: ""
				},
				sysConfig: {},
				userCollection: 0,
				orderNum: 0,
				svipBg: "background: url('" + BASE_URL +
					"/static/images/super_vip_bg.png');background-size: 100%; background-repeat: no-repeat;",
				badgeStyle: {
					'background': '#fff',
					'border': '1px solid #e93323',
					'color': '#e93323',
					'top': '-2px',
					'right': '2px',
					'z-index': 1
				},
				userIcon: {
					coupon: BASE_URL + '/static/images/user/default_discount.png',
					address: BASE_URL + '/static/images/user/default_address.png',
					level: BASE_URL + '/static/images/user/default_level.png',
					collect: BASE_URL + '/static/images/user/default_collection.png',
					money: BASE_URL + '/static/images/user/default_money.png',
					spread: BASE_URL + '/static/images/user/default_spread.png',
					present: BASE_URL + '/static/images/user/default_present.png'
				},
				king: BASE_URL + '/static/images/vip_huangguan.png',
				svip: BASE_URL + '/static/images/svip.png',
				fontColor: '', // 主题颜色
				themeBg: '', // 主题背景
				defaultAvatar: BASE_URL + '/static/admin/default/image/avatar.png', // 默认头像
				selfInfo: {
					id: 0,
					avatar: "",
					nickname: ""
				},
				copyright: '',
				verification: false
			}
		},
		onLoad() {},
		onShow() {
			let theme = uni.getStorageSync('theme')
			this.fontColor = theme.color
			this.themeBg = 'linear-gradient(90deg, ' + theme.bg1 + ', ' + theme.bg2 + ')'
			this.isLogin = this.$store.getters.isLogin

			if (this.isLogin) {
				this.getUserInfo()
				this.getUserBaseInfo()
			}
		},
		methods: {
			navTo(url) {
				if (!this.isLogin) {
					goLogin();
				}

				uni.navigateTo({
					url
				})
			},
			// 获取用户信息
			async getUserInfo() {
				// 登录过期自动登录
				if (!this.isLogin) {
					goLogin();
				}
			},
			// 获取用户基础信息
			async getUserBaseInfo() {
				let res = await this.$api.user.getUserBaseInfo.get()
				this.sysConfig = res.data.config
				this.userCollection = res.data.userCollection
				this.orderNum = res.data.orderNum
				this.orderBar = res.data.orderBar
				this.userInfo = res.data.userInfo
				this.selfInfo = {
					id: res.data.userInfo.id,
					nickname: res.data.userInfo.nickname,
					avatar: res.data.userInfo.avatar
				}
				this.copyright = res.data.title
				this.verification = res.data.verification
			},
			// 开通vip
			buyVip() {
				uni.navigateTo({
					url: '/pages/vip/index'
				})
			},
			hideAvatar() {
				this.$refs.userData.close()
			},
			// 头像上传
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (file) => {
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: BASE_URL + '/api/Common/uploadFile',
							filePath: file.tempFilePaths[0],
							name: 'file',
							success: (result) => {
								uni.hideLoading();
								let res = JSON.parse(result.data)
								if (res.code != 0) {
									this.$tool.error(res.msg)
									return
								}

								this.selfInfo.avatar = res.data.url
							}
						});
					}
				});
			},
			// 微信选择头像回调
			onChooseavatar(e) {
				this.selfInfo.avatar = e.detail.avatarUrl
			},
			// 保存用户信息
			saveInfo() {
				if (this.selfInfo.avatar == this.defaultAvatar) {
					this.$tool.error('请上传头像')
					return
				}

				uni.showLoading({
					title: '保存中...'
				});

				uni.uploadFile({
					url: BASE_URL + '/api/Common/uploadFile',
					filePath: this.selfInfo.avatar,
					name: 'file',
					success: async (result) => {
						uni.hideLoading();
						let res = JSON.parse(result.data)
						if (res.code != 0) {
							this.$tool.error(res.msg)
							return
						}

						this.selfInfo.avatar = res.data.url

						let res2 = await this.$api.user.update.post(this.selfInfo)
						uni.hideLoading();
						if (res2.code == 0) {
							this.$tool.success(res2.msg)
							this.$refs.userData.close()
							this.userInfo.avatar = this.selfInfo.avatar
							this.userInfo.nickname = this.selfInfo.nickname
						} else {
							this.$tool.error(res2.msg)
						}
					}
				});
			},
			// 设置用户信息
			setInfo() {
				if (this.userInfo.avatar == this.defaultAvatar) {
					this.$refs.userData.open()
				}
			},
			// 绑定手机号
			async bindPhone(data) {
				if (data.errMsg) {
					this.$tool.error('小程序权限错误:' + data.errMsg);
					return;
				}

				if (data.detail.errMsg != 'getPhoneNumber:ok') {
					console.log('用户拒绝了', data)
					return;
				}

				let res2 = await this.$api.user.bindPhone.post({
					code: data.detail.code
				})
				uni.hideLoading();
				if (res2.code == 0) {
					this.$tool.success('绑定成功');
					this.getUserBaseInfo()
				} else {
					this.$tool.error(res2.msg);
				}
			}
		}
	}
</script>
<style lang='scss'>
	page {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgb(248, 248, 248);
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.container {
		height: 100%;
		width: 100%;
		overflow: auto;
	}

	.nav-icon {
		width: 48rpx;
		height: 52rpx;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
		margin-bottom: 14rpx;
	}

	.t-icon-jifen {
		height: 43rpx !important;
		margin-bottom: 8rpx !important;
	}

	.t-icon-huiyuan {
		height: 43rpx !important;
		margin-bottom: 8rpx !important;
	}

	.user-section {
		height: 314rpx;
		padding: 100upx 30upx 0;
		position: relative;
		background: $uni-color-primary;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: 28rpx;
			color: #fff;
			margin-left: 20upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		margin-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: $uni-color-primary;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: $uni-color-primary;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}

	.copyright {
		font-size: 12px;
		color: #909399;
		text-align: center;
		margin-bottom: 20upx;
	}

	.user-menus {
		margin-top: 25px;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

	.user-menus .user-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 25%;
		margin-bottom: 23px;
		font-size: 13px;
		color: #333;
	}

	.icon-class {
		color: $icon-color
	}

	.status-title {
		justify-content: space-between;
		padding: 15px 10px 5px 15px;
		margin-top: 12px;
		font-size: 15px;
		color: #282828;
		display: flex;
	}

	.user-level {
		height: 40rpx;
		width: 80rpx;
		border-radius: 20rpx;
		background: #333;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		color: #ffdeb2;
		margin-left: 10rpx;
		font-weight: 700;
	}

	.user-data {
		display: flex;
		align-items: center;
	}

	.user-info {
		margin-left: 20rpx;
	}

	.set-tools {
		display: flex;
	}

	.super-vip {
		border-radius: 22rpx;
		height: 124rpx;
		line-height: 104rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.user-icon {
		height: 54rpx;
		width: 54rpx;
	}

	.super-info {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.desc {
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
			flex: 1;
			margin-left: 10rpx;
		}

		.super-btn {
			width: 142rpx;
			height: 54rpx;
			background: #333;
			border-radius: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #f6dcad;
			font-size: 22rpx;
			line-height: 1;
		}
	}

	.user-data-box {
		/* #ifndef MP-WEIXIN */
		height: 600rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 520rpx;
		/* #endif */
		width: 100%;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background: #fff;
		padding: 30rpx;

		.title {
			height: 40rpx;
			display: flex;
			justify-content: space-between;
		}

		.desc {
			margin-top: 40rpx;
			color: #909399;
			font-size: 26rpx;
			height: 60rpx;
			width: 100%;
		}

		.avatar {
			display: flex;
			align-items: center;
			height: 100rpx;
			width: 100%;
			border-bottom: 1px solid #E9E9EB;
			font-size: 26rpx;

			button {
				background: #fff;
				height: auto;
				width: auto;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			button::after {
				border: none;
			}
		}
	}

	.save {
		width: 300rpx;
		margin-top: 30rpx;
		color: #fff;
	}

	.user-nick {
		/* #ifndef MP-WEIXIN */
		margin-left: 80rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-left: 110rpx;
		/* #endif */
	}

	.tips {
		width: 100rpx;
		height: 40rpx;
		border-radius: 32rpx;
		background: #FFF;
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: center;
		top: -36rpx;
		transform: scale(0.8);
		position: absolute;
		left: -10px;
	}

	.setPhone {
		display: inline-block;
		font-size: 18rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 20rpx;
		color: #fff;
		margin-left: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
	}
</style>